<template>
    <div>

      <div class="authority-factor" :ref="'functionModal'" id="treeGidTreeTable">
        <!-- @cell-click = cellClick -->
        <zk-table
          ref="table"
          sum-text="sum"
          index-text="#"
          :data="data"
          :columns="columns"
          :stripe="props.stripe"
          :border="props.border"
          :show-header="props.showHeader"
          :show-summary="props.showSummary"
          :show-row-hover="props.showRowHover"
          :tree-type="props.treeType"
          :is-fold="props.isFold"
          :expand-type="props.expandType"
          :selection-type="props.selectionType"
        >
          <template slot="factor" slot-scope="scope">
            <label v-for="item in scope.row.actions">
              <input type="checkbox" readonly="readonly" :title="item.name" :id="item.id" :value="item.id" class="type-qxyz"/>
              <span>{{ item.name }}</span>
            </label>
          </template>

          <template slot="btnList" slot-scope="scope">
            <button :id="scope.row.id" type="button" class="btn btn-info" @click="redactJurisdiction(scope.row.id,scope.row.displayName)">编辑</button>
          </template>

        </zk-table>
      </div>

      <jListModal
        :jurisdictionListObj="jurisdictionListObj"
        @JListModalClose="JListModalCloseFn"
      ></jListModal>

    </div>
</template>

<script>
    import jListModal from "./JurisdictionListModal"
    export default {
      name: "JurisdictionTreeTable",
      data() {
        return {
          props: {
            stripe: true,
            border: false,
            showHeader: true,
            showSummary: false,
            showRowHover: true,
            showIndex: true,
            treeType: true,
            isFold: true,
            expandType: false,
            selectionType: false,
          },
          data: [],
          columns: [
            {
              label: '菜单名称',
              prop: 'displayName',
              width: '20%',
            },
            {
              label: '权限因子名称',
              prop: 'arr',
              width: '70%',
              type: 'template',
              template: 'factor',
            },
            {
              label: '操作',
              prop: 'id',
              width: '10%',
              type: 'template',
              template: 'btnList',
            },
          ],
          rowIndexAry: [],
          RoleFunctionId:null,
          jurisdictionListObj:{
            isShow:false,
            id:null,
            name:null
          }
        }
      },
      watch:{
        roleSetFunctionObj:{
          handler(v1){
            if( v1.isShow ){
              //console.log(this.roleId);
              this.RoleFunctionId = this.roleId;
              //渲染菜单和权限因子列
              this.getAllRoleFunction();
              //console.log($("#" + $(this.$refs.functionModal)[0].id + "").find("input:checkbox").prop("checked",false));
            }
          },
          deep:true
        }
      },
      components:{
        jListModal
      },
      created(){
        this.getAllRoleFunction();
      },
      methods:{

        //获取所有角色菜单和权限因子列
        getAllRoleFunction(){

          this.$axios.get(this.HOST+"/priFuncs/scheme/page",{
            params:{
              pageNum:1,
              pageSize:-1
            }
          })
            .then((data)=>{
              this.data = data.data.data;
              //console.log(data);
              //查询角色拥有的权限
              this.getRoleFunction();
            })
            .catch((err)=>{
              //console.log(err);
            })
        },
        //编辑权限因子
        redactJurisdiction(JId,displayName){
          ////console.log(JId);
          ////console.log(name);
          this.jurisdictionListObj.id = JId;
          this.jurisdictionListObj.isShow = true;
          this.jurisdictionListObj.name = displayName;
        },
        //关闭编辑弹窗
        JListModalCloseFn(){
          this.jurisdictionListObj.isShow = false;
          // 清除选中的数据
          this.jurisdictionListObj.isShow = null;
          this.jurisdictionListObj.name = null;
          this.getAllRoleFunction();
        },
        //查询角色拥有的权限因子
        getRoleFunction(){
          this.$axios.get(this.HOST+"/priFuncs/menu/page/byRole/"+this.RoleFunctionId)
            .then((data)=>{
              let allFunction = data.data;
              //console.log(allFunction);
              for( let i=0;i<allFunction.length;i++ ){
                //查找权限因子
                this.findFunction(allFunction[i]);

                let menu = $("#"+ allFunction[i].id +"");
                let qxyzTd = menu.parents("tr").find("td").eq(3);
                qxyzTd.find("input:checkbox").prop("disabled",false);

              }
              //console.log(data);
            })
            .catch((err)=>{
              //console.log(err);
            })
        },
        //查找权限因子
        findFunction(item){
          if( item.actions.length > 0 ){
            for( let i=0;i<item.actions.length;i++ ){
              let menu = $("#"+ item.actions[i].id +"");
              //console.log(menu);
              menu.prop("checked",true);
            }
          }
          if( item.children ){
            this.findFunction(item.children)
          }else{
            $("#"+ item.id +"").prop("checked",true);
          }
        },
        //向上查找并且选中父级菜单
        findParentMenu(itemMenu){
          //console.log(itemMenu.dataset);

          if(itemMenu.dataset.pid){
            $("#" + itemMenu.dataset.pid + "").prop("checked",true);
            ////console.log($("#" + itemMenu.dataset.pid + ""));
          }else{
            return false;
          }
        },
      }
    }
</script>

<style scoped>
  #treeGid{
    height: 100%;
  }
  .zk-table{
    height: 100%;
  }

  .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
    height: 34px;
    line-height: 34px;
    padding: 0 8px;
  }

  .zk-table__cell-inner label{
    position: relative;
    height: 30px;
  }

  .zk-table__cell-inner label input{
    position: absolute;
    left: 0;
    top: -3px;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0;
    cursor: pointer;
  }

  .zk-table__cell-inner label span{
    display: inline-block;
    margin-right: 10px;
    border-radius: 4px;
    width: 60px;
    height: 28px;
    padding: 0 5px;
    overflow: hidden;
    box-sizing: border-box;
    text-overflow:ellipsis;
    white-space: nowrap;
  }

  .zk-table__cell-inner label input +  span{
    color: #31b0d5;
    border:1px solid #31b0d5;
  }

  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
  .btn-info{
    height: 30px;
    padding: 0 10px;
    border-radius: 4px;
    margin-right: 5px;
    background-color: #31b0d5;
    border: none;
    color: #fff;
    font-size: 12px;
  }
</style>
